<template>
  <dialog-x
    :visible.sync="isVisible"
    @open="open"
    @close="close"
    @change="popupChange"
  >
    <view class="h4 text-center">拖动滑块验证</view>
    <view @touchend="onTouchend">
      <movable-area
        class="movable-area"
        :animation="true"
      >
        <movable-view
          class="movable-slider"
          :class="{ active: movable.success }"
          :x="movable.slider.x"
          direction="horizontal"
          @change="movableChange"
          :disabled="movable.success"
        >
          <text
            v-if="movable.success"
            class="iconfont icon-select-bold"
          ></text>
          <text
            v-else
            class="iconfont icon-map-finger-full finger"
          ></text>
        </movable-view> </movable-area
    ></view>
  </dialog-x>
</template>

<script>
  export default {
    name: "VerifyDrag",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        isVisible: false,
        movable: {
          success: false,
          area: {
            with: 0,
          },
          slider: {
            with: 0,
            x: 0,
            moveX: 0,
          },
        },
      };
    },
    watch: {
      visible(newValue) {
        this.isVisible = newValue;
        if (newValue) {
          this.$emit("open");
        } else {
          this.$emit("close");
        }
      },
    },
    mounted() {
      this.isVisible = this.visible;
      if (this.visible) {
        this.$emit("open");
      }
    },
    methods: {
      getMovableElSize() {
        let that = this;
        setTimeout(() => {
          const query = uni.createSelectorQuery().in(that);
          query
            .select(".movable-area")
            .boundingClientRect((data) => {
              this.movable.area.width = data.width;
            })
            .exec();

          query
            .select(".movable-slider")
            .boundingClientRect((data) => {
              this.movable.slider.width = data.width;
            })
            .exec();
        }, 0);
      },

      movableChange(e) {
        if (e.detail.source === "touch") {
          this.movable.slider.moveX = e.detail.x;
        }
      },

      onTouchend(e) {
        this.movable.slider.x = this.movable.slider.moveX;
        if (
          this.movable.slider.moveX + this.movable.slider.width >=
          this.movable.area.width - this.movable.slider.width
        ) {
          this.movable.slider.x = this.movable.slider.moveX;
          this.movable.success = true;
          this.$emit("change", this.movable.success);
          setTimeout(() => {
            this.close();
          }, 1500);
        } else {
          this.movable.success = false;

          this.$emit("change", this.movable.success);
          setTimeout(() => {
            this.movable.slider.x = 0;
          }, 500);
        }
      },
      popupChange(e) {
        this.$emit("update:visible", e);
        if (e) {
          this.$emit("open");
          this.getMovableElSize();
        } else {
          this.$emit("close");
        }
      },

      open() {
        this.getMovableElSize();
        this.movable.success = false;
        this.movable.slider.x = 0;
        this.movable.slider.moveX = 0;
        this.$emit("change", this.movable.success);
      },

      close() {
        this.movable.slider.x = 0;
        this.movable.slider.moveX = 0;
        this.$emit("update:visible", false);
        this.$emit("close");
      },
    },
  };
</script>

<style lang="scss" scoped>
  $height: 100rpx;

  movable-area {
    overflow: hidden;
    width: 100%;
    height: $height;
    margin-top: 20rpx;
    background-color: rgba($color: #000000, $alpha: 0.2);
    border-radius: 50rpx;
  }
  movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: $height;
    width: 150rpx;
    background-color: $color-primary;
    color: #fff;
    font-size: 36rpx;
    border-radius: 50rpx;
    &.active {
      background-color: $color-success;
    }
  }

  .finger {
    animation: shake 1s infinite;
  }

  //左右晃动动画
  @keyframes shake {
    0% {
      transform: translateX(-10rpx);
    }
    50% {
      transform: translateX(10rpx);
    }
    100% {
      transform: translateX(-10rpx);
    }
  }
</style>
